import Link from "next/link";
import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { EventRow } from "@/components/event-row";
import { Badge, Chip, Empty, Flag, PageHeader, Panel, Score, Sparkline, StateBadge, Stat, TypeChip } from "@/components/ui";
import { ShareButton } from "@/components/watch-button";
import { api, SITE_URL, type ClusterDetail, type EventItem } from "@/lib/api";
import { fmtInt, fmtOffset, fmtScore, relTime, typeLabel, utcDate, utcDateTime, utcTime } from "@/lib/format";

export const dynamic = "force-dynamic";

function num(v: number | string | null | undefined): number {
  if (v === null || v === undefined) return 0;
  const n = typeof v === "string" ? Number(v) : v;
  return Number.isFinite(n) ? n : 0;
}

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
  const { slug } = await params;
  const d = await api.cluster(slug);
  if (!d) return { title: "Cluster not found" };
  const c = d.cluster;
  const desc = (c.summary?.trim() || `${c.event_count} signal${c.event_count === 1 ? "" : "s"} from ${c.source_count ?? 1} source${(c.source_count ?? 1) === 1 ? "" : "s"} — ${d.first_party_signals} first-party, ${d.external_signals} external. Propagation timeline with WebSensor lead time.`).slice(0, 200);
  const path = `/cluster/${c.slug ?? c.id}`;
  return {
    title: c.title,
    description: desc,
    alternates: { canonical: path },
    openGraph: { type: "article", title: c.title, description: desc, url: `${SITE_URL}${path}`, publishedTime: new Date(c.first_at).toISOString(), modifiedTime: new Date(c.last_at).toISOString(), tags: c.categories },
    twitter: { card: "summary", title: c.title, description: desc },
  };
}

/** Signals per hour (or per day when the story spans more than 3 days) — computed from the events. */
function series(events: EventItem[], first: number, last: number): { values: number[]; unit: "hour" | "day" } {
  const span = Math.max(0, last - first);
  const unit: "hour" | "day" = span > 72 * 3600e3 ? "day" : "hour";
  const step = unit === "hour" ? 3600e3 : 86400e3;
  const start = Math.floor(first / step) * step;
  const n = Math.min(120, Math.floor((last - start) / step) + 1);
  const values = new Array<number>(Math.max(1, n)).fill(0);
  for (const e of events) {
    const i = Math.floor((new Date(e.detected_at).getTime() - start) / step);
    if (i >= 0 && i < values.length) values[i]! += 1;
  }
  return { values, unit };
}

export default async function ClusterPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const d = await api.cluster(slug);
  if (!d) notFound();
  const c = d.cluster;
  const path = `/cluster/${c.slug ?? c.id}`;
  const lead = num(d.lead_time_ms ?? c.lead_time_ms);
  const velocity = num(c.velocity);
  const firstMs = new Date(c.first_at).getTime();
  const lastMs = new Date(c.last_at).getTime();
  const spanMs = Math.max(0, lastMs - firstMs);
  const sources = sourcesOf(d);
  const countryOf = (p: ClusterDetail["propagation"][number]): string | null => (p.source as { country?: string | null }).country ?? null;
  const spark = series(d.events, firstMs, lastMs);
  const primary = d.events.find((e) => e.id === c.primary_event_id) ?? d.events[0];
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "NewsArticle",
    headline: c.title,
    description: c.summary ?? undefined,
    datePublished: new Date(c.first_at).toISOString(),
    dateModified: new Date(c.last_at).toISOString(),
    url: `${SITE_URL}${path}`,
    mainEntityOfPage: `${SITE_URL}${path}`,
    author: { "@type": "Organization", name: "WebSensor", url: SITE_URL },
    publisher: { "@type": "Organization", name: "WebSensor", url: SITE_URL },
    about: d.entities.slice(0, 12).map((x) => ({ "@type": "Thing", name: x.name, url: `${SITE_URL}/entity/${x.id}` })),
    keywords: c.categories.join(", "),
    ...(primary?.url ? { isBasedOn: primary.url } : {}),
  };

  return (
    <>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
      <PageHeader
        compact
        kicker={
          <span className="flex flex-wrap items-center gap-x-2 gap-y-1">
            <StateBadge state={c.state} />
            <span className="font-mono text-fg-subtle">CLUSTER</span>
            {d.entities.slice(0, 6).map((x) => (
              <Chip key={x.id} href={`/entity/${x.id}`} title={typeLabel(x.type)}>{x.name}</Chip>
            ))}
            {d.entities.length > 6 && <span className="font-mono text-fg-subtle tabular">+{d.entities.length - 6}</span>}
            {c.categories.slice(0, 3).map((k) => <Chip key={k} href={`/category/${k}`} className="!text-fg-subtle">{k}</Chip>)}
          </span>
        }
        title={c.title}
        description={c.summary?.trim() ? <span className="whitespace-pre-line">{c.summary.trim()}</span> : undefined}
        actions={
          <>
            <ShareButton path={path} />
            {primary && <Link href={`/event/${primary.slug}`} className="rounded-md border border-line bg-panel px-2.5 py-1 text-[12px] hover:border-line-strong">Primary event →</Link>}
          </>
        }
      />

      <div className="mb-3 flex flex-wrap items-center gap-x-3 gap-y-1 text-[12.5px] text-fg-muted">
        <span><span className="font-mono font-semibold text-fg tabular">{fmtInt(c.event_count)}</span> signal{c.event_count === 1 ? "" : "s"}</span>
        <span className="text-fg-subtle">·</span>
        <span><span className="font-mono font-semibold text-signal tabular">{fmtInt(d.first_party_signals)}</span> first-party</span>
        <span className="text-fg-subtle">·</span>
        <span><span className="font-mono font-semibold text-fg tabular">{fmtInt(d.external_signals)}</span> external</span>
        <span className="text-fg-subtle">·</span>
        <span><span className="font-mono font-semibold text-fg tabular">{fmtInt(c.source_count ?? sources.length)}</span> source{(c.source_count ?? sources.length) === 1 ? "" : "s"}</span>
        <span className="text-fg-subtle">·</span>
        <span className="font-mono text-[11.5px] text-fg-subtle tabular" title={`${utcDateTime(c.first_at)} → ${utcDateTime(c.last_at)}`}>{utcDateTime(c.first_at).replace(" UTC", "")} → {utcDate(c.last_at) === utcDate(c.first_at) ? utcTime(c.last_at) : utcDateTime(c.last_at).replace(" UTC", "")} UTC</span>
        <span className="text-fg-subtle">·</span>
        <span className="text-fg-subtle">updated {relTime(c.last_at)}</span>
      </div>

      {lead > 0 && (
        <div className="mb-3 flex flex-wrap items-center gap-x-3 gap-y-1 border-l-2 border-l-signal bg-signal-soft/50 px-3 py-2 text-[12.5px]" role="note">
          <span className="font-mono text-[10.5px] font-semibold tracking-wider text-signal">WEBSENSOR LEAD TIME</span>
          <span className="text-fg">
            detected <span className="font-mono font-semibold text-signal tabular">{fmtOffset(lead).replace("+", "")}</span> before the first external report
          </span>
          {c.first_party_at && c.first_external_at && (
            <span className="font-mono text-[11px] text-fg-subtle tabular">first-party {utcTime(c.first_party_at, false)} · external {utcTime(c.first_external_at, false)} UTC</span>
          )}
        </div>
      )}

      <div className="mb-4 grid grid-cols-2 gap-px overflow-hidden rounded-lg border border-line bg-line sm:grid-cols-4">
        <div className="bg-panel"><Stat label="Peak signal" value={fmtScore(Math.max(c.max_importance, ...d.events.map((e) => e.signal_score ?? 0)))} hint={`importance ${fmtScore(c.max_importance)}`} tone={c.max_importance >= 80 ? "hot" : undefined} /></div>
        <div className="bg-panel"><Stat label="Velocity" value={velocity > 0 ? fmtScore(velocity) : "0"} hint={velocity >= 40 ? "signals accumulating fast" : "signals per unit of time"} tone={velocity >= 40 ? "warn" : undefined} /></div>
        <div className="bg-panel"><Stat label="Span" value={fmtOffset(spanMs).replace("+", "")} hint={`${utcTime(c.first_at, false)} → ${utcTime(c.last_at, false)} UTC`} /></div>
        <div className="bg-panel"><Stat label="Lead time" value={lead > 0 ? fmtOffset(lead).replace("+", "") : "—"} hint={lead > 0 ? "first-party before external" : d.external_signals === 0 ? "no external report yet" : lead < 0 ? `external first by ${fmtOffset(-lead).replace("+", "")}` : "n/a"} tone={lead > 0 ? "signal" : undefined} /></div>
      </div>

      <div className="grid gap-4 xl:grid-cols-[1fr_340px]">
        <div className="flex min-w-0 flex-col gap-4">
          <Panel title={<>Web velocity · propagation <span className="font-mono text-fg-subtle">{d.propagation.length}</span></>} dense action={<span className="hidden items-center gap-3 font-mono text-[10.5px] text-fg-subtle sm:inline-flex"><span className="inline-flex items-center gap-1"><span className="inline-block h-3 w-0.5 bg-signal" /> first-party</span><span className="inline-flex items-center gap-1"><span className="inline-block h-3 w-0.5 bg-line-strong" /> external</span></span>}>
            {d.propagation.length === 0 ? (
              <Empty>No propagation recorded yet — the cluster has a single signal.</Empty>
            ) : (
              <ol className="divide-y divide-line">
                {d.propagation.map((p, i) => (
                  <li key={p.id} className={`grid grid-cols-[4.25rem_1fr] gap-x-3 border-l-2 px-3 py-2 sm:grid-cols-[4.25rem_1fr_auto] ${p.first_party ? "border-l-signal" : "border-l-line-strong"}`}>
                    <div className="flex flex-col font-mono text-[12px] leading-4 tabular">
                      <span className={`font-semibold ${i === 0 ? "text-fg" : p.first_party ? "text-signal" : "text-fg-muted"}`}>{i === 0 || p.offset_ms === 0 ? "00:00" : fmtOffset(p.offset_ms)}</span>
                      <time dateTime={p.at} title={utcDateTime(p.at)} className="text-[10.5px] text-fg-subtle">{utcTime(p.at)}</time>
                    </div>
                    <div className="min-w-0 sm:col-start-2">
                      <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[11px]">
                        <Link href={`/source/${p.source.id}`} className="font-mono font-semibold uppercase tracking-wide text-fg-muted hover:text-fg">{p.source.name}</Link>
                        {countryOf(p) && <Flag code={countryOf(p)} />}
                        <span className="sm:hidden"><Score value={p.importance} size="sm" /></span>
                        <Badge kind={p.first_party ? "first-party" : "external"} compact />
                        {p.sensor?.type && <Chip className="font-mono" title={p.sensor.name}>{p.sensor.type}</Chip>}
                        <TypeChip type={p.event_type} />
                      </div>
                      <Link href={`/event/${p.slug}`} className="mt-0.5 block font-medium leading-snug text-fg hover:underline">{p.title}</Link>
                    </div>
                    <div className="hidden items-start pt-0.5 sm:flex"><Score value={p.importance} /></div>
                  </li>
                ))}
              </ol>
            )}
          </Panel>
          <Panel title={<>Signals <span className="font-mono text-fg-subtle">{d.events.length}</span></>} dense action={primary && <Link href={`/event/${primary.slug}`} className="text-[11px] text-fg-subtle hover:text-fg">primary event →</Link>}>
            {d.events.length ? d.events.map((e) => <EventRow key={e.id} ev={e} showDate />) : <Empty>No signal in this cluster.</Empty>}
          </Panel>
        </div>
        <aside className="flex min-w-0 flex-col gap-4">
          <Panel title={spark.unit === "hour" ? "Signals per hour" : "Signals per day"}>
            <Sparkline values={spark.values} width={300} height={44} tone={c.state === "breaking" ? "hot" : "signal"} />
            <div className="mt-1 flex justify-between font-mono text-[10.5px] text-fg-subtle tabular">
              <span>{utcDate(c.first_at)} {utcTime(c.first_at, false)}</span>
              <span>peak {Math.max(0, ...spark.values)}/{spark.unit === "hour" ? "h" : "d"}</span>
              <span>{utcDate(c.last_at)} {utcTime(c.last_at, false)}</span>
            </div>
          </Panel>
          <Panel title={<>Entities <span className="font-mono text-fg-subtle">{d.entities.length}</span></>} dense>
            {d.entities.length === 0 ? (
              <Empty>No entity resolved for this cluster.</Empty>
            ) : (
              <ul className="divide-y divide-line">
                {d.entities.slice(0, 14).map((x) => (
                  <li key={x.id} className="flex items-center justify-between gap-2 px-3 py-1.5 text-[12.5px]">
                    <Link href={`/entity/${x.id}`} className="min-w-0 truncate font-medium hover:underline">{x.name}</Link>
                    <span className="flex shrink-0 items-center gap-1.5"><Chip>{typeLabel(x.type)}</Chip><Score value={x.importance} size="sm" /></span>
                  </li>
                ))}
                {d.entities.length > 14 && <li className="px-3 py-1.5 text-[11px] text-fg-subtle">+{d.entities.length - 14} more entities</li>}
              </ul>
            )}
          </Panel>
          <Panel title={<>Sources <span className="font-mono text-fg-subtle">{sources.length}</span></>} dense>
            {sources.length === 0 ? (
              <Empty>No source.</Empty>
            ) : (
              <ul className="divide-y divide-line">
                {sources.map((s) => (
                  <li key={s.id} className="grid grid-cols-[1fr_auto_2rem] items-center gap-x-2 px-3 py-1.5 text-[12.5px]">
                    <div className="min-w-0">
                      <Link href={`/source/${s.id}`} className="block truncate font-medium hover:underline">{s.name}</Link>
                      <div className="flex items-center gap-1.5 font-mono text-[10.5px] text-fg-subtle"><span className="truncate">{s.domain}</span>{s.country && <Flag code={s.country} />}</div>
                    </div>
                    <Badge kind={s.first_party ? "first-party" : "external"} compact />
                    <span className="text-right font-mono text-[12px] tabular text-fg-muted" title="Signals from this source">{s.n}</span>
                  </li>
                ))}
              </ul>
            )}
          </Panel>
          <Panel title="Share">
            <div className="flex flex-wrap items-center gap-2">
              <ShareButton path={path} />
              <Link href={`/api/v1/clusters/${encodeURIComponent(c.slug ?? c.id)}`} className="rounded-md border border-line bg-panel px-2.5 py-1 font-mono text-[11.5px] hover:border-line-strong">JSON</Link>
            </div>
            <p className="mt-2 break-all font-mono text-[10.5px] text-fg-subtle">{SITE_URL}{path}</p>
          </Panel>
        </aside>
      </div>
    </>
  );
}

function sourcesOf(d: ClusterDetail): { id: string; name: string; domain: string; first_party: boolean; country: string | null; n: number }[] {
  const m = new Map<string, { id: string; name: string; domain: string; first_party: boolean; country: string | null; n: number }>();
  for (const e of d.events) {
    const id = e.source?.id ?? e.source_id;
    const cur = m.get(id);
    if (cur) cur.n += 1;
    else m.set(id, { id, name: e.source?.name ?? id, domain: e.source?.domain ?? "", first_party: e.first_party !== false, country: e.country ?? null, n: 1 });
  }
  for (const p of d.propagation) {
    if (!m.has(p.source.id)) m.set(p.source.id, { id: p.source.id, name: p.source.name, domain: p.source.domain, first_party: p.first_party, country: (p.source as { country?: string | null }).country ?? null, n: 1 });
  }
  return [...m.values()].sort((a, b) => Number(b.first_party) - Number(a.first_party) || b.n - a.n);
}